
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>${obj.name }</title>
<link rel="shortcut icon" href="favicon.ico">
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>

<!-- 界面单独引入的其他样式和脚本 -->
<link rel="stylesheet"
	href="${path }/resource/plugin/zTree/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${path }/resource/plugin/zTree/jquery.ztree.core-3.5.min.js"></script>

<script type="text/javascript"
	src="${path }/resource/plugin/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet"
	href="${path }/resource/plugin/syntaxhighlighter_3.0.83/styles/shCore.css" />
<link type="text/css" rel="stylesheet"
	href="${path }/resource/plugin/syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
<style type="text/css">
.hkdg {
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid #aeaeae;
	border-radius: 5px;
	padding: 3px;
	margin: 5px;
}

blockquote {
	font-size: 14px;
	line-height: 25px;
}

.title {
	color: #6f5499;
	font-size: 32px;
	text-shadow: 2px 3px 2px #ababab;
}

.time {
	color: #999;
	font-style: oblique;
}
</style>
</head>

<body class="gray-bg">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="wrapper wrapper-content  animated fadeInRight">

		<h1><b>[${obj.cate.name }]—${obj.name }</b><a class="btn btn-success pull-right" href="${path }/interface/download?id=${obj.id}">导出接口</a></h1>
		
		<div class="row" id="app">
			<div class="col-sm-9  ">
				<div class="panel panel-success">
					<div class="panel-heading">调用说明</div>
					<div class="panel-body">
						<h3>URL</h3>
						<p>${project.url}${obj.url }</p>
						<br>
						<h3>HTTP请求方式</h3>
						<p>${obj.method }</p>
						<br>
						<h3>HTTP请求头信息</h3>
						<p>${obj.headerParam }</p>
						<br>
						<h3>请求参数</h3>
						<table v-show="inParamsShow" class="table table-bordered  ">
							<tr class="active">
								<th>层级</th>
								<th>名称</th>
								<th>是否必须</th>
								<th>位置</th>
								<th>类型</th>
								<th  style="max-width: 300px;" >示例值</th>
								<th>备注</th>
							</tr>
							<tr v-for="(param,index) in inParams">
								<td>{{param.deep}}</td>
								<td><template v-for="i in param.deep"> &nbsp;</template>
									|-- {{param.name}}</td>
								<td>{{param.necessary | sf}}</td>
								<td>{{param.inUrl|restful}}</td>
								<td>{{param.type}}</td>
								<td>{{param.def}}</td>
								<td>{{param.remark}}</td>
							</tr>
						</table>

						<br>
						<h3>请求示例</h3> <pre class="brush: js;" id="exp" name="code">${obj.exIn}</pre>
						<br>
						<h3>返回参数</h3>
						<table v-show="outParamsShow" class="table table-bordered  ">
							<tr class="active">
								<th>层级</th>
								<th>名称</th>
								<th>是否必须</th>
								<th>类型</th>
								<th style="max-width: 300px;" >示例值</th>
								<th>备注</th>
							</tr>
							<tr v-for="(param,index) in outParams">
								<td>{{param.deep}}</td>
								<td><template v-for="i in param.deep">-</template> &nbsp;
									{{param.name}}</td>
								<td>{{param.necessary | sf}}</td>
								<td>{{param.type}}</td>
								<td>{{param.def}}</td>
								<td>{{param.remark}}</td>
							</tr>
						</table>
						<br>
						<h3>返回示例</h3> <pre class="brush: js;" id="exp2" name="code2">${obj.exOut}</pre>
						<br>
						
						
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="panel panel-default">
					<div class="panel-heading">开发信息</div>
					<div class="panel-body">
						<h3>开发者</h3>
						<p>${obj.developer }</p>
						<h3>最后更新</h3>
						<p>${obj.updateUser }&nbsp;&nbsp;
							<span class="time"><fmt:formatDate
									value="${obj.updateTime }" pattern="yyyy-MM-dd HH:MM" /></span>
						</p>
						<h3>版本</h3>
						<p>${obj.version }</p>
						<h3>备注</h3>
						<p>${obj.remark }</p>
					</div>
				</div>
			</div>
		</div>

		 
	</div>
	<script src="${path }/resource/js/vue.js"></script>
	<script type="text/javascript">
		var inParam, outParam, headerParam,app;

		$.AjaxProxy({data:{
			id:"${param.id}"
		}}).invoke("${path}/interface/getInterface",function(loj){
		 
			var mapInfo=loj.getValue("mapInfo");
			
		 
			inParam=mapInfo.inParam;
			
			outParam=mapInfo.outParam;
			
			console.log(inParam);
			console.log(outParam);


			 app = new Vue({
				el : "#app",
				data : {
					inParams : inParam,
					inParamsShow : true,
					inParamsShowJSON : false,
					inParamsErrorMsg : "",

					outParams : outParam,

					outParamsShow : true,
					outParamsShowJSON : false,
					outParamsErrorMsg : "",
				},
				filters:{
					sf:function(value){
						if(value){
						return	'是';
						}else{
							return	'否';
						}
					},
					restful(value){
						if(value){
							return	'restful';
							}else{
								return	'普通参数';
							}
					}
					
				}
			});
			
		});
		
		
	 
		function testInterface() {
			layer.open({
				type : 2,
				title : "调试接口",
				shadeClose : false,
				closeBtn : 1, //不显示关闭按钮
				shade : [ 0.3 ],
				area : [ '60%', '100%' ],
				offset : 'r',
				anim : 2,
				content : [ '${path}/interface/testInterface?id=${obj.id}' ]
			});
		}
	</script>
</body>
</html>